<script setup lang="ts">
import ConsultItem from './ConsultItem.vue'
import { getConsultOrderList } from '@/services/consult'
import type { ConsultOrderItem } from '@/types/consult'
import { CONSULT_TYPE } from '@/enums'
import { ref } from 'vue'

const props = defineProps<{
  type: CONSULT_TYPE
}>()

const consultOrderList = ref<ConsultOrderItem[]>([])
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
const current = ref<number>(0)
// 内容距离底部小于300px时触发load事件
const onLoad = async () => {
  // 设置加载状态
  loading.value = true
  current.value++
  const { data } = await getConsultOrderList({
    pageSize: 10,
    current: current.value,
    type: props.type
  })
  // 每次上拉加载更多时，应该时把新的数据和原有的数据进行拼接
  consultOrderList.value = [...consultOrderList.value, ...data.rows]
  // 如果当前页数大于等于总页数，那么就没有更多数据了
  if (current.value >= data.pageTotal) {
    finished.value = true
  }
  loading.value = false
}
const handleDel = (id: string) => {
  // consultOrderList.value = consultOrderList.value.filter(
  //   (item) => item.id !== id
  // )
  consultOrderList.value.splice(
    consultOrderList.value.findIndex((item) => item.id === id),
    1
  )
}
</script>

<template>
  <div class="consult-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <consult-item
        v-for="item in consultOrderList"
        :key="item.id"
        :order-item="item"
        :onDel="handleDel"
      />
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.consult-list {
  padding: 10px 15px;
}
</style>
